<template>
    <div class="chart-box" @drop="drop" @dragover="dragover">
        <Chart :config="chartConifg" />
        <div class="bottom" v-if="haveChart">
            <div class="btn-box">
                <i v-if="setted" class="btn el-icon-success" style="color: #67c23a"></i>
                <i v-else class="btn el-icon-error" style="color: #e6a23c"></i>
                <i class="btn el-icon-setting" style="margin-left: 10px" @click="setting"></i>
            </div>
        </div>
        <Drawer :drawerVisible="drawerVisible" @drawerClose="drawerClose" :formData="querySetting" :chartConifg="chartConifg" />
    </div>
</template>

<script>
import demoOptions from '../../components/Echart/demoOptions.js';
import Drawer from '../../components/Drawer/Drawer';

export default {
    components: {
        Drawer,
    },
    emits: ['chartConfig'],
    props: {
        sort: Number,
    },
    data() {
        return {
            chartConifg: {}, // demo图形配置信息
            drawerVisible: false, // 抽屉打开关闭
            haveChart: false, // 当前单元是否存在图形
            setted: false, // 是否保存了真实图形配置
            querySetting: {
                // 真实图形配置
                name: '',
                rest: 0,
                radio: '',
                url: '',
            },
            chartType: '',
        };
    },
    methods: {
        drop(e) {
            e.preventDefault();
            const chartType = this.$store.state.chartDemoType;
            this.chartType = chartType;
            const config = demoOptions[chartType];
            this.chartConifg = config;
            this.haveChart = true;
            this.setted = false;
            this.querySetting = {
                // 真实图形配置
                name: '',
                rest: 0,
                radio: '',
                url: '',
            };
            console.log('drop', this.setted);
        },
        dragover(e) {
            e.preventDefault();
            // console.log(e);
        },
        setting() {
            this.drawerVisible = true;
        },
        drawerClose(form) {
            if (JSON.stringify(form) === '{}') {
                this.drawerVisible = false;
                return true;
            } else {
                this.setted = true;
                this.querySetting = form;
                this.drawerVisible = false;
                const params = {
                    sort: this.sort,
                    chartConfig: {
                        ...this.querySetting,
                        chartType: this.chartType,
                    },
                };
                this.$emit('chartConfig', params);
                return true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.chart-box {
    width: 100%;
    padding: 5px;
    // min-width: 300px;
    // min-height: 150px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    position: relative;
    // padding: 10px;
    // background: cadetblue;
    .bottom {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 50px;
        background: rgba($color: #000000, $alpha: 0.1);
        border-top: 1px solid #ccc;
        .btn-box {
            position: absolute;
            right: 24px;
            font-size: 25px;
            top: 7px;
            .btn {
                cursor: pointer;
            }
        }
    }
}
</style>
